<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>注册</title>
    <!--<meta name="description" content="这是一个 index 页面">-->
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="/static/admin/main/assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="/static/admin/main/assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="/static/admin/main/assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/static/admin/main/assets/css/amazeui.datatables.min.css"/>
    <link rel="stylesheet" href="/static/admin/main/assets/css/app.css">
    <script src="/static/admin/main/assets/js/jquery.min.js"></script>

</head>

<body data-type="login">
<script src="/static/admin/main/assets/js/theme.js"></script>
<div class="am-g tpl-g">
    <!-- 风格切换 -->
    <div class="tpl-skiner">
        <div class="tpl-skiner-toggle am-icon-cog">
        </div>
        <div class="tpl-skiner-content">
            <div class="tpl-skiner-content-title">
                选择主题
            </div>
            <div class="tpl-skiner-content-bar">
                <span class="skiner-color skiner-white" data-color="theme-white"></span>
                <span class="skiner-color skiner-black" data-color="theme-black"></span>
            </div>
        </div>
    </div>
    {block name="main"}
    <div class="tpl-login">
        <div class="tpl-login-content">
            <div class="tpl-login-title">注册用户</div>
            <span class="tpl-login-content-info">
                  创建一个新的用户
              </span>
            <form class="am-form tpl-form-line-form myform" action="{:url('index/Register/doRegister')}" method="post">
                <div class="am-form-group">
                    <input type="tel" class="tpl-form-input mytel" name="utel" placeholder="手机">
                    <span class="am-text-danger"></span>
                </div>
                <div class="am-form-group">
                    <input type="text" class="tpl-form-input myusername" name="username" placeholder="用户名">
                    <span class="am-text-danger"></span>
                </div>

                <div class="am-form-group">
                    <input type="password" class="tpl-form-input mypass" name="upass" placeholder="请输入密码">
                    <span class="am-text-danger"></span>
                </div>

                <div class="am-form-group">
                    <input type="password" class="tpl-form-input repass" name="repass" placeholder="再次输入密码">
                    <span class="am-text-danger"></span>
                </div>

                <div class="am-form-group">
                    <input type="submit"
                           class="am-btn am-btn-primary am-btn-block tpl-btn-bg-color-success tpl-login-btn" value="提交">
                </div>
            </form>
        </div>
    </div>
    {/block}
</div>
<script src="/static/admin/main/assets/js/amazeui.min.js"></script>
<script src="/static/admin/main/assets/js/app.js"></script>
{block name="myjs"}
<script>
    $(function () {
        $('.mytel').blur(function () {
            var tel = $(this);
            checktel(tel);
        });
        $('.myusername').blur(function () {
            var username = $(this);
            checkusername(username);
        });
        $('.mypass').blur(function () {
            var mypass = $(this);
            checkmypass(mypass);
        });
        $('.repass').blur(function () {
            checkRepass();
        });
        $('.myform').submit(function () {
            return (function () {
                var tel = $('.mytel');
                var username = $('.myusername');
                var mypass = $('.mypass');
                if (checktel(tel) && checkusername(username) && checkmypass(mypass) && checkRepass()) {
                    return true;
                } else {
                    return false;
                }
            })();
            return false;
        })
    });
    function checktel(tel) {
        var reg = /^1[3|4|5|7|8][0-9]{9}$/;
        if (reg.test(tel.val())) {
            tel.next('span').html('');
            var ret = '';
            $.ajax({
                url:"{:url('index/Register/checktel')}",
                type:'post',
                async:false,
                data:{
                    'tel':tel.val()
                },
                success:function(data){
                    if(!data){
                        tel.next('span').html('该手机号已被注册');
                        ret = 'false';
                    }
                }
            });
            if(ret == 'false'){
                return false;
            }
            console.log('222');
            return true;
        } else {
            tel.next('span').html('手机号不符合规则');
            return false;
        }
    }
    function checkusername(username) {
        var reg = /^[0-9a-zA-Z\u4e00-\u9fa5_]{3,16}$/;
        var retn =  '';
        if (reg.test(username.val())) {
            username.next('span').html('');
            $.ajax({
                url:"{:url('index/Register/checkusername')}",
                type:'post',
                async:false,
                data:{
                    'username':username.val()
                },
                success:function(data){
                    if(!data){
                        username.next('span').html('该用户名已被注册');
                        retn = 'false';
                    }
                }
            });
            if(retn == 'false'){
                return false;
            }
            return true;
        } else {
            console.log(111);
            username.next('span').html('用户名不符合规则');
            return false;
        }
    }
    function checkmypass(mypass) {
        var reg = /^[\w]{6,12}$/;
        if (reg.test(mypass.val())) {
            mypass.next('span').html('');
            return true;
        } else {
            mypass.next('span').html('密码不符合规则');
            return false;
        }
    }
    function checkRepass() {
        var pass = $('.mypass');
        var repass = $('.repass');
        if (pass.val() == repass.val()) {
            repass.next('span').html('');
            return true;
        } else {
            repass.next('span').html('两次密码不一致');
            return false;
        }
    }
</script>
{/block}
</body>
</html>